<template>
  <div id="listPage" class="flex justify-between list_box">
    <div class="page_list_box">
      <div v-if="loadData.length">
        <div v-for="(item, index) in loadData" :key="index">
          <div class="flex justify-start margin-top-30">
            <div class="page_style_one_box">
              <img class="page_style_one_img" :src="item.img" alt="" />
            </div>
            <div class="page_style_one_text" style="border-bottom: 1px solid #d1d1d1; width: 100%">
              <div class="page_style_one_title ellipsis">
                {{ item.title }}
              </div>
              <div class="page_style_one_content text_ellipsis_3">
                {{ item.content }}
              </div>
              <div class="page_style_one_date" style="margin-bottom: 30px">
                {{ item.date }}
                <span style="margin-left: 10px">{{ item.author }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-center margin-top-30 margin-bottom-30">
          <n-pagination v-model:page="page" :page-count="30" />
        </div>
      </div>
      <div v-else class="no_content">
        <!--        <img src="images/none.png" alt="" />-->
        <div class="font-18 text-center margin-top-20 no_text">暂无内容</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import bg1 from '@/assets/images/ls/1.jpg';
  import bg2 from '@/assets/images/ls/2.jpg';
  import bg3 from '@/assets/images/ls/3.jpg';
  import bg4 from '@/assets/images/ls/4.jpg';
  import bg5 from '@/assets/images/ls/5.jpg';
  import bg6 from '@/assets/images/ls/6.jpg';
  import bg7 from '@/assets/images/ls/7.jpg';
  import bg8 from '@/assets/images/ls/8.jpg';
  import bg9 from '@/assets/images/ls/9.jpg';
  import bg10 from '@/assets/images/ls/10.jpg';
  import bg11 from '@/assets/images/ls/11.jpg';
  import bg12 from '@/assets/images/ls/12.jpg';

  const loadData = ref([
    {
      id: 1,
      img: bg1,
      title: '自定义自定义自定义自定义自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 2,
      img: bg2,
      title: '自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 3,
      img: bg3,
      title: '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 4,
      img: bg4,
      title: '自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 5,
      img: bg5,
      title: '自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 6,
      img: bg6,
      title:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 7,
      img: bg7,
      title: '自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 8,
      img: bg8,
      title: '自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 9,
      img: bg9,
      title: '自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 10,
      img: bg10,
      title: '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 11,
      img: bg11,
      title: '自定义自定义自定义自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
    {
      id: 12,
      img: bg12,
      title: '自定义自定义自定义自定义自定义自定义',
      content:
        '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
      date: '2024/07/12',
      author: '匿名作者',
    },
  ]);
  const page = ref(1);
</script>

<style lang="less" scoped>
  .list_box {
    min-height: calc(100vh - 80px);
    background-color: #ffffff;
    padding: 20px 8px 0;
  }

  .page_list_box {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
  }

  .swiper-main-container {
    width: 720px;
    height: 409px;
    margin-left: unset !important;
    margin-right: unset !important;
  }

  .swiper-main-container .swiper-slide {
    position: relative;
  }

  .swiper-main-container .swiper-slide .custom-pagination-title {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 15px;
    padding: 5px 0 5px 20px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .swiper-main-container .swiper-slide .custom-pagination-text {
    width: 70%;
  }

  .live_box {
    width: 80px;
    height: 20px;
    line-height: 20px;
    background: linear-gradient(302deg, #ffa069 0%, #d7000f 100%);
    border-radius: 5px;
    color: #fff;
  }

  .live_box img {
    width: 13px;
    height: 13px;
    margin-right: 6px;
  }

  .order_box {
    color: #4eaaff;
    position: relative;
    margin-left: 10px;
  }

  .order_box::before {
    content: '•';
    position: absolute;
    left: -10px;
    /* 根据需要调整位置 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    /* 圆点大小 */
    color: #4eaaff;
    /* 圆点颜色 */
  }

  .special_recom_content_img {
    width: 40px;
    height: 20px;
    line-height: 20px;
    background-image: url('../images/special/special_recom_content_img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    text-align: center;
  }

  .video_play_img {
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
</style>
